<template>
  <div class="bg-inner">
    <div class="map-item" :class="{'active':current==index}"  v-for="(item,index) in mapData" :style="{'left':item.value[0],'top':item.value[1]}" :key="index" @click="handleClick(index)">
      <span class="map-title">{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "map-module",
  props: {
    mapData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      current:2
    }
  },
  methods: {
    handleClick (index) {
      if (this.current != index) {
        this.current = index;
        this.$emit('change',this.current)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bg-inner {
  background-image: url('@/assets/images/map.png');
  background-size: 100% 100%;
  width: 469.7px;
  height: 473px;
  position: relative;
  //background: radial-gradient(rgba(25, 62, 128, 0), #193e80);
  // border: 1px solid #707070;
  // position: absolute;
  // left: 30px;
  // top: 30px;
}

.map-item {
  position: absolute;

  left: 0px;
  top: 0px;

  background-image: url('@/assets/images/map-icon.png');
  background-size: 100% 100%;
  width: 72px;
  height: 80px;

  cursor: pointer;

  &.active {
    background-image: url('@/assets/images/map-icon-active.png');
  }

  .map-title {
    font-family: YouSheBiaoTiHei;
    font-size: 16px;
    color: #fff;

    position: absolute;
    left: 14px;
    top: 5px;
  }
}
</style>